// 文件路径: src/components/StepUI.jsx

import React, { useContext } from 'react';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import AccordionField from './AccordionField';
import WorkflowContext from 'contexts/WorkflowContext'; // 根据实际路径导入

const StepUI = ({ step }) => {
  const { addField } = useContext(WorkflowContext); // 解构需要的方法
  if (!step || !step.fields) {
    // 更好的错误处理
    return <div>步骤信息不完整</div>;
  }
  const { name, nameCn, type, id, pUniqueIndex, fields } = step; // 解构属性
  // console.log('fields in StepUI:', fields);
  // console.log('--&&&&&&&&&&&&&&&&&&&&&&&&&&&&------Step', step);

  return (
    <Grid container spacing={3}>
      <Grid item xs={12}>
        <h3>{nameCn}</h3>
        <p>模块类型: {type}</p>
        <p>模块名: {name}</p>
        <p>识别码: {pUniqueIndex}</p>
      </Grid>
      <Grid item xs={12}>
        <AccordionField stepIndex={pUniqueIndex} fieldsData={fields} />
      </Grid>
    </Grid>
  );
};

export default React.memo(StepUI);
